<template>
  <div id="app">
    <nav>
      <router-link to="/">自定义列表组件演示</router-link> |
      <router-link to="/about">todolist组件演示</router-link>
    </nav>
    <router-view/>
    <!-- left: 50%;transform:translate(-50%,0); -->
    <div ref="dashboard" class="dashboard" :style="{top: y + 'px',right: x + 'px'}">
      <div class="cpu">
        <el-progress type="dashboard" :percentage="os.cpu"></el-progress>
        <div>CPU占用率</div>
      </div>
      <div class="memory" style="margin-left: 20px;">
        <el-progress type="dashboard" :percentage="os.memory" color="#6f7ad3"></el-progress>
        <div>内存占用率</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
  body{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
  }
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  user-select: none;
  overflow: hidden;
}
.dashboard{
  display: flex; 
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
}

nav {
  padding: 30px;

  a {
    text-decoration: none;
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

@import "./style/scss/fontawesome.scss";
@import "./style/scss/regular.scss";
@import "./style/scss/solid.scss";
@import "./style/scss/brands.scss";
</style>

<script>
  export default{
    name: "AppHome",
    data(){
      return {
        os:{
          cpu:0,
          memory:0
        },
        ox:0,
        oy:0,
        x: null,
        y: null
      }
    },
    mounted(){
      setInterval(async ()=>{
        let osRes = await this.axios.get('/os')
        this.os.cpu = Number(osRes.data.cpu.split('%')[0])
        this.os.memory = Number(osRes.data.memory.split('%')[0]) 
      }, 1000)  
      this.initMove()
    },
    methods:{
      initMove(){
        let body = document.body
        // a.onmousemove
        body.addEventListener('mousedown', ()=>{
          body.addEventListener('mousemove', this.move)
        })
        
        body.addEventListener('mouseup', ()=>{
          body.removeEventListener('mousemove', this.move)
        })
      },
      move(e){
        this.x = e.target.clientWidth - e.clientX
        this.y = e.clientY
      }
    }
  }
</script>

